import React,{Component} from 'react';
import { TabBar } from 'antd-mobile';

import home from 'images/home0.png'
import homeActive from 'images/home.png'

import select from 'images/select0.png'
import selectActive from 'images/select.png'

import car from 'images/car.png'
import carActive from 'images/car1.png'

import mine from 'images/mine0.png'
import mineActive from 'images/mine.png'

// import HomeMainCotainer from 'pages/home/HomeMainCotainer'
// import Select from 'pages/select/Select'
// import Shopcar from "pages/shopcar/Shopcar"
// import Mine from "pages/mine/Mine"

import {
  AppTabBarbox,
  TabbarHome,
  TabberSelect,
  TabberShopcar,
  TabberMine

} from 'components/common/styleApptabbar'

import {
  Link
}from 'react-router-dom'

import HomeMainCotainer from 'pages/home/HomeMainCotainer'
class AppTabbar extends Component {
  // constructor(props) {
  //   super(props);
  //   this.state = {
  //     selectedTab: 'home',
  //     fullScreen: true, 
  //   };


  // }

constructor(props){
  super(props)
}

// renderItem(){
//   return (
//     <HomeMainCotainer></HomeMainCotainer> 
//   )
// }


  render(){
    return(
     <AppTabBarbox >
 
      <TabbarHome>
        <Link to="/home">
          <img src={home}/>
          <i>首页</i>
        
        </Link>
       
      </TabbarHome>

      <TabberSelect>
        <Link to="/select">
          <img src={select}/>
          <i>分类</i>
        </Link>
      </TabberSelect>

      <TabberShopcar>
        <Link to='/shopcar'>
          <img src={car}/>
          <i>分类</i>
        </Link>
      </TabberShopcar>

      <TabberMine>
        <Link to='/mine'>
          <img src={mine}/>
          <i>我的</i>
        </Link>
      </TabberMine>
     </AppTabBarbox>
    )
  }
  // render() {
  //   return (

  //     <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 ,flex:1} : { height: 400 }}>
  //       <TabBar
  //         unselectedTintColor="#949494"
  //         tintColor="#ff6700"
  //         barTintColor="white"
  //       >
  //         <TabBar.Item
  //           title="首页"
  //           key="首页"
  //           icon={<div style={{
  //             width: '22px',
  //             height: '22px',
  //             background: `url(${home}) center center /  21px 21px no-repeat`}}
  //           />
  //           }
  //           selectedIcon={<div style={{
  //             width: '22px',
  //             height: '22px',
  //             background: `url(${homeActive}) center center /  21px 21px no-repeat` }}
  //           />
  //           }
  //           selected={this.state.selectedTab === 'home'}
  //           onPress={() => {
  //             this.setState({
  //               selectedTab: 'home',
  //             });
  //             //在这里想使用编程式导航  要想到 从APPTABBAR 里面将props属性 传下来，拿到router包裹的属性
  //             console.log("这个是首页导航")
  //             this.props.history.push('/home')
  //           }}
  //           data-seed="logId"
  //         >
  //         <HomeMainCotainer/>
  //         </TabBar.Item>
  //         <TabBar.Item
  //           icon={
  //             <div style={{
  //               width: '22px',
  //               height: '22px',
  //               background: `url(${select}) center center /  21px 21px no-repeat` }}
  //             />
  //           }
  //           selectedIcon={
  //             <div style={{
  //               width: '22px',
  //               height: '22px',
  //               background: `url(${selectActive}) center center /  21px 21px no-repeat` }}
  //             />
  //           }
  //           title="分类"
  //           key="分类"
  //           selected={this.state.selectedTab === 'select'}
  //           onPress={() => {
  //             this.setState({
  //               selectedTab: 'select',
  //             });

  //             this.props.history.push('/select')
  //           }}
  //           data-seed="logId1"
  //         >
  //          <Select/>
  //         </TabBar.Item>
  //         <TabBar.Item
  //           icon={
  //             <div style={{
  //               width: '22px',
  //               height: '22px',
  //               background: `url(${car}) center center /  21px 21px no-repeat` }}
  //             />
  //           }
  //           selectedIcon={
  //             <div style={{
  //               width: '22px',
  //               height: '22px',
  //               background: `url(${carActive}) center center /  21px 21px no-repeat`}}
  //             />
  //           }
  //           title="购物车"
  //           key="购物车"
  //           selected={this.state.selectedTab === 'shopcar'}
  //           onPress={() => {
  //             this.setState({
  //               selectedTab: 'shopcar',
  //             });

  //             this.props.history.push('/shopcar')
  //           }}
  //         >
  //           <Shopcar></Shopcar>
  //         </TabBar.Item>
  //         <TabBar.Item
  //           icon={{ uri: `${mine}` }}
  //           selectedIcon={{ uri: `${mineActive}` }}
  //           title="我的"
  //           key="我的"
  //           selected={this.state.selectedTab === 'mine'}
  //           onPress={() => {
  //             this.setState({
  //               selectedTab: 'mine',
  //             });
  //             this.props.history.push('/mine')
  //           }}
  //         >
  //         <Mine></Mine>
  //         </TabBar.Item>
  //       </TabBar>
  //     </div>
  //   );
  // }
}

export default AppTabbar